<template>
    <div>
        <HeadGo></HeadGo>
        <div class="goods">
            <h1>我的购物车</h1>
            <el-table ref="multipleTable" :data="tableData"
                      :header-cell-style="{textAlign:'left'}" :cell-style="{textAlign: 'left'}"  :row-style="{height:'100px'}"
                      tooltip-effect="dark"  @selection-change="handleSelectionChange" height="500px" >

                <el-table-column label="商品" width="500">
                    <template slot-scope="scope">
                        <img :src="require('@/'+scope.row.product)" style="width:100px;height: 100px">
                        <div class="goods-name">{{ scope.row.name }}</div>
                    </template>
                </el-table-column>

                <el-table-column  label="数量" width="200">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.num" size="mini" :min="0" :max="10" />
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="单价（元）" width="120"/>

                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button style="color: #056da1" @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <span class="all-money">总金额：{{totalPrice}}元</span>
                <input class="pay-for" type="button" value="支付"/>
            </div>
        </div>
    </div>

</template>

<script>
    import HeadGo from "@/components/HeadGo";
    export default {
        name: "shopping",
        components:{HeadGo},
        data() {
            return {
                counter:0,
                tableData: [
                    {
                        id:1,
                        product:'assets/images/e1.jpg',
                        name: '王小五麻辣烫',
                        price: 28.9,
                        num:1
                    }, {
                        id:2,
                        product:'assets/images/e1.jpg',
                        name: '赵四炸鸡',
                        price: 30.9,
                        num:1
                    }, {
                        id:3,
                        product:'assets/images/e1.jpg',
                        name: '李阿姨拌面',
                        price: 18.9,
                        num:1
                    }, {
                        id:4,
                        product:'assets/images/e1.jpg',
                        name: '孙姐炸串',
                        price: 10.9,
                        num:1
                    },{
                        id:5,
                        product:'assets/images/e1.jpg',
                        name: '阿花水果捞',
                        price: 22.9,
                        num:1
                    },
                ],
                currentRow: null
            }
        },
        computed:{
           totalPrice(){
               let total=0;
               for(let i=0;i<this.tableData.length;i++){
                   let item=this.tableData[i];
                   total+=item.num*item.price;
               }
               return total;
            },
        },
        methods: {

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
        }
    }
</script>

<style scoped>
    .goods{
        margin: 50px auto;
        width: 940px;
    }
    h1{
        padding: 20px;
    }
    .goods-name{
        display: inline-block;
        margin-left: 10px;
    }

    .all-money{
        margin-left: 300px;
    }
    .pay-for{
        width: 80px ;
        height: 30px;
        border-radius: 4px;
        margin-left: 40px;
        background: #056da1;
        color: white;
        border: none;
    }
</style>